import React from 'react'
import { NavBar, Collapse, Tag, List } from 'antd-mobile'
import { useNavigate, useSearchParams, useLocation } from 'react-router-dom'
import styles from './css/deail.module.css'

const Deail = () => {
    const nav = useNavigate()
    const { state } = useLocation()
    const [sp] = useSearchParams()
    const start = sp.get("start")
    const end = sp.get("end")

    const sitList = ["经济舱", "商务舱", "头等舱"]
    const sitPrices = [
        state.lps[0].atp,
        state.lps[0].atp * 2,
        state.lps[0].atp * 3
    ]
    return (
        <div>
            <NavBar onBack={() => nav(-1)}>{start}——{end}</NavBar>
            <dl className={styles.dl}>
                <dt>
                    <div>{state.dasn}</div>
                    <div>{state.dt}</div>
                </dt>
                <dd>
                    <div>{state.aat}</div>
                    <div>{state.aasn}</div>
                </dd>
                <dd>
                    <div>{state.at}</div>
                    <div>￥{state.lps[0].atp}</div>
                </dd>
            </dl>
            <Collapse accordion
                arrowIcon={(active) =>
                    active ? (
                        <Tag color='warning'>收起</Tag>
                    ) : (
                        <Tag color='warning'>预定</Tag>
                    )
                }
            >

                {
                    sitList.map((v, i) => {
                        return <Collapse.Panel key={i} title={`${v} ￥${sitPrices[i]}`}>
                            <List>
                                <List.Item>
                                    极速买票
                                </List.Item>
                            </List>
                            <List>
                                <List.Item>
                                    普通买票
                                </List.Item>
                            </List>
                        </Collapse.Panel>
                    })
                }

            </Collapse>
        </div>
    )
}

export default Deail
